情境

CSS Grid 是一個格線佈局屬性，跟 Flexbox 的使用非常相似，是由外容器和內元件來組成整個結構。

以下面結構為例：

<div class="grid-container">
  <div class="grid-item" style="background-color: #FF99C8"></div>
  <div class="grid-item" style="background-color: #FCF6BD"></div>
  <div class="grid-item" style="background-color: #D0F4DE"></div>
  <div class="grid-item" style="background-color: #A9DEF9"></div>
  <div class="grid-item" style="background-color: #E4C1F9"></div>
</div>

當我們在 grid-container 當中宣告他為一個 grid 容器時，我們能夠在容器上透過 grid-template 定義格線的結構，因此我們能夠讓如上述程式碼很簡單、扁平的內元件結構也能做出非常豐富的排版佈局。

舉一個簡單的例子，假設我們要讓這些內元件排成三行直行，多出來的往下一列排列，那我們可以這樣做：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

你能看見多遠的未來呢？

上面舉的例子是「內元件排成三行直行，多出來的往下一列排列」。但現實狀況是，有時候我們需要將一行盡量填滿，而我們的顯示寬度是響應式的，因此我們很難指定一行要幾列。

很貼心的是，Grid 剛好就提供這種語法給我們，讓元件能夠「自動填滿」一行。

自動填滿的語法有兩種，分別是 auto-fill 以及 auto-fit。這兩個語法在某些情境下效果看起來很像，所以很可能發生當下看起來沒事，可是當情境改變之後，問題就顯現出來了的慘劇。

舉例來說，假設我們的容器最大寬度是 1000px，內部有四個元件：

<div class="grid-container">
  <div class="grid-item" style="background-color: #FF99C8"></div>
  <div class="grid-item" style="background-color: #FCF6BD"></div>
  <div class="grid-item" style="background-color: #D0F4DE"></div>
  <div class="grid-item" style="background-color: #A9DEF9"></div>
</div>

設定其內元件最小最大寬度為 minmax(200px, 1fr)，使用 auto-fit 的效果如下：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 1000px;
  width: 100%;
}

而使用 auto-fill 的效果如下：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  max-width: 1000px;
  width: 100%;
}

看起來是完全沒有差別，不是嗎？

但如果今天情境改變了，我們內元件只剩下兩個，其他條件都不改變，效果會如何呢？我們一起來看看：

<div class="grid-container">
  <div class="grid-item" style="background-color: #FF99C8"></div>
  <div class="grid-item" style="background-color: #FCF6BD"></div>
</div>

所以，如果使用 auto-fit，他的效果會讓延展每一個內元件，讓他能夠填滿外容器的寬度。有點像是 Flexbox 中，我們把剩餘寬度平均分配給每一個內元件一樣。

假設我們對一個頁面做卡片式的排版佈局，例如電商的商品列表頁、線上課程的課程列表頁、Youtube 的影片列表頁等等，我們會比較希望達到的效果會是 auto-fill 的效果。因為我們總不希望這些卡片列表的卡片變形吧？

小結

本篇介紹了 CSS Grid 當中，自動填滿時會用到的 auto-fit、auto-fill 的差異性，會值得提出來是因為，這兩個性質在特定情境下的效果會長一樣，因此如果我們沒有確實指定，很可能在我們不預期的時候發生錯誤，這樣的意外事件是我們需要盡力減少的。